<template>
  <div class="content-manager">
    <el-button
      type="primary"
      style="width: 200px; margin-left: 20px; margin-bottom: 20px"
      @click="addArticle"
      >发布文章</el-button
    >
    <div class="tabs">
      <el-tabs :tab-position="tabPosition">
        <el-tab-pane label="内容信息"
          ><content-info
            :article-total="articleInfo.total"
            :drafts-total="draftsList.total"
          ></content-info
        ></el-tab-pane>
        <el-tab-pane label="文章管理">
          <manager-header
            @checkbox-change="controlCheckBox1"
            @batch-delete="batchDeleteArticle"
            @search-article="searchArticle"
            :model="'article'"
          ></manager-header>
          <el-checkbox-group
            v-show="showCheckBox1"
            v-model="checkList"
            class="article-checkbox"
            :style="checkBox__height"
          >
            <el-checkbox
              class="checkbox-input"
              v-for="i in articleInfo.list"
              :key="i.id"
              :label="i.id"
              ><br
            /></el-checkbox>
          </el-checkbox-group>
          <articles
            :model="'manager'"
            class="article-list"
            :article-info="articleInfo"
            @page-change="pageChange"
            @load-article-by-type="loadArticleByType"
            @delete-article="deleteArticle"
          ></articles>
          <div style="margin: 30px 0">
            <el-button
              class="create-blog-btn"
              type="primary"
              @click="addArticle"
              >写博客</el-button
            >
          </div>
        </el-tab-pane>
        <el-tab-pane label="评论管理">评论管理</el-tab-pane>
        <el-tab-pane :label="draftsLabel"
          ><manager-header
            @checkbox-change="controlCheckBox2"
            @batch-delete="batchDeleteDrafts"
            :model="'drafts'"
          ></manager-header
          ><el-checkbox-group
            v-show="showCheckBox2"
            v-model="draftsCheckList"
            class="article-checkbox"
            :style="checkBox__height"
          >
            <el-checkbox
              class="checkbox-input"
              v-for="i in draftsList.list"
              :key="i.id"
              :label="i.id"
              ><br
            /></el-checkbox>
          </el-checkbox-group>
          <articles
            :model="'manager'"
            :article-info="draftsList"
            class="article-list"
            @page-change="pageChange1"
            @delete-article="deleteArticle"
          ></articles
        ></el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import { api } from "@/api";
import { StoreHandler } from "@/store";
import Articles from "@/components/Articles.vue";
import ContentInfo from "@/components/contentInfo.vue";
import managerHeader from "@/components/layout/ManagerHeader.vue";
export default {
  components: { Articles, ContentInfo, managerHeader },
  data() {
    return {
      tabPosition: "left",
      checkList: [],
      draftsCheckList: [],
      articleInfo: {
        list: [],
        total: 0,
      },
      draftsList: {
        list: [],
        total: 0,
      },
      type: "",
      isIndeterminate: true,
      checkAll: false,
      showCheckBox1: false,
      showCheckBox2: false,
    };
  },
  methods: {
    pageChange(page) {
      this.loadArticleInfo(this.$route.query.aid, null, page);
    },
    pageChange1(page) {
      this.loadDrafts(this.$route.query.aid, null, page);
    },
    controlCheckBox1() {
      this.showCheckBox1 = !this.showCheckBox1;
    },
    controlCheckBox2() {
      this.showCheckBox2 = !this.showCheckBox2;
    },
    loadArticleByType(type) {
      this.type = type;
      this.loadArticleInfoByType(null, this.type);
    },
    addArticle() {
      this.$router.push("/editor");
    },
    searchArticle(keyWord) {
      this.loadArticleInfo(this.$route.query.aid, keyWord, 1);
    },
    async loadUserInfo() {
      try {
        this.loading = true;
        const userInfo = (await this.$axios(api.user.getUserInfo())).data;
        StoreHandler.setters.setUserInfo(userInfo);
        this.loading = false;
      } catch (error) {
        this.loading = false;
        if (error.response.data.code == 403) {
          StoreHandler.setters.setUserInfo(null);
          console.log(error.response.data.message);
        } else if (error.response) {
          this.$alert(error.response.data.message);
        } else {
          this.$alert("网络错误");
        }
      }
      StoreHandler.setters.setAvatarUrl(
        "/api/" +
          api.user.getAvatar(this.userInfo ? this.userInfo.username : null).url
      );
    },
    async loadArticleInfoByType(aid = null, type = null, page = 1) {
      this.type = type;
      try {
        this.loading = true;
        this.articleInfo = (
          await this.$axios(api.article.getArticleListByType(aid, type, page))
        ).data;
        this.loading = false;
      } catch (error) {
        this.loading = false;
        if (error.response) {
          this.$alert(error.response.data.message);
        } else {
          this.$alert("网络错误");
        }
      }
    },
    async loadArticleInfo(aid = null, keyWord = null, page = 1) {
      try {
        this.loading = true;
        this.articleInfo = (
          await this.$axios(api.article.getArticleList(aid, keyWord, page))
        ).data;
        this.loading = false;
      } catch (error) {
        this.loading = false;
        if (error.response) {
          this.$alert(error.response.data.message);
        } else {
          this.$alert("网络错误");
        }
      }
    },
    async loadDrafts(aid) {
      try {
        this.loading = true;
        this.draftsList = (
          await this.$axios(api.article.getDraftsList(aid))
        ).data;
        this.loading = false;
      } catch (error) {
        this.loading = false;
        if (error.response) {
          this.$alert(error.response.data.message);
        } else {
          this.$alert("网络错误");
        }
      }
    },
    deleteArticle(articleInfo) {
      this.$confirm(`此操作将永久删除该文章, 是否继续?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          articleInfo.content = "abc";
          try {
            this.$axios(api.article.deleteArticle(articleInfo));
          } catch (error) {
            if (error.response) {
              this.$alert(error.response.data.message);
            }
          }
        })
        .then(() => {
          this.$alert("删除成功!");
          location.reload();
        });
    },
    batchDeleteArticle() {
      if (this.checkList.length == 0) {
        this.$alert("您还未选择要删除的文章");
        return;
      }
      this.$confirm(
        `您已选中${this.checkList.length}篇文章, 此操作将永久删除选中文章, 是否继续?`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          try {
            this.$axios(api.article.batchDeleteArticle(this.checkList));
          } catch (error) {
            if (error.response) {
              this.$alert(error.response.data.message);
            }
          }
        })
        .then(() => {
          this.$alert("删除成功!");
          location.reload();
        });
    },
    batchDeleteDrafts() {
      if (this.draftsCheckList.length == 0) {
        this.$alert("您还未选择要删除的文章");
        return;
      }
      this.$confirm(
        `您已选中${this.draftsCheckList.length}篇文章, 此操作将永久删除选中文章, 是否继续?`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          try {
            this.$axios(api.article.batchDeleteArticle(this.draftsCheckList));
          } catch (error) {
            if (error.response) {
              this.$alert(error.response.data.message);
            }
            return;
          }
        })
        .then(() => {
          this.$alert("删除成功!");
          location.reload();
        });
    },
  },
  computed: {
    checkBox__height() {
      return {
        "--box-height": this.articleInfo.list.length * 360 + "px",
      };
    },
    sumCheckListLength() {
      return this.checkList.length + this.draftsCheckList.length;
    },
    draftsLabel() {
      return `草稿箱(${this.draftsList.total})`;
    },
  },
  async mounted() {
    await this.loadArticleInfo(this.$route.query.aid);
    await this.loadDrafts(this.$route.query.aid);
  },
};
</script>

<style lang="less" scoped>
.content-manager {
  margin-top: 60px;
  .tabs {
    .article-list {
      margin-left: 150px;
      max-width: 1000px;
      @media screen and (max-width: 1000px) {
        margin-left: 24px;
      }
    }
    .article-checkbox {
      position: absolute;
      display: inline-flex;
      flex-direction: column;
      height: var(--box-height);
      margin-left: 100px;
      @media screen and (max-width: 1000px) {
        margin-left: 0;
      }
      .checkbox-input {
        margin: 0;
        flex: 1;
        padding: 15px 0;
        /deep/.el-checkbox__inner {
          border: 1px solid #409eff;
        }
        /deep/.el-checkbox__input {
          margin-top: calc((360px - 16px) / 2);
        }
      }
    }
    .create-blog-btn {
      position: relative;
      width: 300px;
      display: block;
      margin: 0 auto;
    }
  }
  /deep/.el-tabs {
    .el-tabs__item {
      width: 200px;
      @media screen and (max-width: 800px) {
        width: 100px;
      }
      text-align: center;
    }
  }
}
</style>
